<template>
	<view>

		<view class="gui-list gui-padding">
			<view class="gui-list-items">
				<view class="gui-list-image ucenter-face gui-relative">
					<image class="gui-list-image ucenter-face-image"
						src="https://images.unsplash.com/photo-1662695094714-966fc339a2e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80"
						mode="aspectFill"></image>
				</view>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-primary-color">Jimmer</text>
					</view>
					<view class="gui-flex">
						<button type="default" class=" gui-gtbg-blue" style="width:182rpx;margin-left: 0;">
							<text class="gui-color-white gui-button-text-mini gui-icons">审核通过</text>
						</button>
						
					</view>

				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
		<view class="gui-margin-top">
			<gui-swiper :swiperItems="swiperItems" imgMode="scaleToFill" :width="750" :height="330"></gui-swiper>
		</view>
		<view class="gui-list gui-margin-top gui-padding-x">
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-blue">&#xe60d;</text>
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">我的订单</text>
						<text class="gui-badge gui-bg-red gui-color-white">12</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-orange">&#xe612;</text>
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">收入</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe60d;</text>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text">店铺管理</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
		<!-- <view class="ucenter-line gui-bg-white gui-dark-bg-level-3"></view> -->
		<view class="gui-padding-x">
			
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe666;</text>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text">我的消息</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe626;</text>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text">联系客服</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe63b;</text>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text">关于我们</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>

		</view>
		<view class="ucenter-line gui-bg-white gui-dark-bg-level-3"></view>
		

	</view>
</template>
<script>
	var img =
		"https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2MHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=90";
	export default {
		data() {
			return {
				items: [
					[80, '', '动态'],
					[100, '', '好友'],
					[50, '', '私信'],
					['￥199', '', '余额']
				],
				swiperItems: [{
						img: img,
						url: '',
						title: "测试标题 001",
						opentype: 'navigate'
					},
					{
						img: img,
						url: '',
						title: "测试标题 002",
						opentype: 'navigate'
					},
					{
						img: img,
						url: '',
						title: "测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
						opentype: 'navigate'
					},
				]
			}
		},
		methods: {
			swiperchange: function(e) {
				console.log(e);
			},
			taped: function(e) {
				uni.showToast({
					title: "您点击了第 " + e + " 个项目",
					icon: "none"
				});
			}
		}
	}
</script>
<style scoped>
	.ucenter-face {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-face-image {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-line {
		height: 20rpx;
		margin: 16rpx 0;
	}

	.logoff {
		line-height: 88rpx;
		font-size: 28rpx;
	}

	.gui-list-title-text {
		line-height: 60rpx;
	}
</style>